import Top from '../components/top'
import '../assets/css/indent.css'
import { useState, useEffect } from 'react'
import {useNavigate} from 'react-router-dom'
function Indent() {
       // 编程式导航
       const Navigate = useNavigate()
       const [goodsInfo, setGoosInfo] = useState(JSON.parse(sessionStorage.getItem("goodsDetail")))
       const [allPrice, setAllPrice] = useState(0)
       useEffect(() => {
              console.log(goodsInfo);
              // setGoosInfo([...goodsInfo])
              // 合计金额
              const price = () => {
                     let sum = 0;
                     goodsInfo.map((item) => {
                            sum += item.price * (item.num || item.ishot)
                     })
                     return sum.toFixed(2)
              }
              setAllPrice(price)
       }, [])
       // 点击跳转优惠卷页面
       const getcoupon = ()=>{
              Navigate('/pon')
       }
       // 回退上一页
    const cliTop = () => {
       Navigate(-1)
   }
       return (<div className='indent'>
              <div className='header'>
                     <Top />
                     <div className='header_div'>
                            <button onClick={() => cliTop()}>&lt;</button>
                            <h1>确认订单</h1>
                     </div>
              </div>
              <div className='path'>
                     <div className='path_box'>
                            <p>
                                   代用名  185 ****** 3507</p>
                            <p>
                                   北京 北京市 朝阳区</p>
                            <p>
                                   豆各庄观音堂五方桥6号321
                            </p>
                     </div>
              </div>
              <div className='nav'>
                     <div className='nav_top'>
                            <img src={require('../assets/img/indent/编组 16@3x.png')} alt="" />
                            <p>品牌精选</p>
                     </div>
                     <div className='nav_bom'>
                            <span>以免运费</span>
                            <span>|</span>
                            <span onClick={()=>getcoupon()}>领卷</span>
                     </div>
              </div>

              {/* 商品信息 */}
              {
                     goodsInfo.map(item => {
                            return (
                                   <div className='goods' key={item.id}>
                                          <div className='goods_img'>
                                                 <img src={item.img} alt="" />
                                          </div>
                                          <div className='goods_detail'>
                                                 <p>
                                                        <span>限时</span>
                                                        {item.goodsname}
                                                 </p>
                                                 <p>
                                                        {item.description}
                                                 </p>
                                                 <p>
                                                        <span>¥ {item.price}</span>
                                                        <del>¥ {item.market_price}</del>
                                                 </p>
                                                 <div className='goods_detail_div'>
                                                        <div className='p1'>
                                                               <p className='sp1'> 七天无理由退货</p>
                                                               <span className='sp2'>特价</span>
                                                        </div>
                                                        <div>
                                                               x{item.num?item.num:item.ishot}
                                                        </div>
                                                 </div>
                                          </div>
                                   </div>
                            )
                     })
              }

              <div className='footer'>
                     <ul>
                            <li>
                                   <p>发票类型</p>
                                   <p>不开发票  &gt;</p>
                            </li>
                            <li>
                                   <p>售后免邮</p>
                                   <p className='footer_p'>部分商家赠送</p>
                            </li>
                            <li>
                                   <p>买家留言</p>
                                   <input type="text" placeholder='填写内容需要雨商家协商并确认,45字以内' />
                            </li>
                     </ul>
              </div>
              <div className='footer footer_2'>
                     <ul>
                            <li>
                                   <p>商品金额</p>
                                   <p className='footer_p'>¥1998</p>
                            </li>
                            <li>
                                   <p>优惠活动</p>
                                   <p className='footer_p2'>- ¥200</p>
                            </li>
                            <li>
                                   <p>优惠卷</p>
                                   <p>暂无可用&gt;</p>
                            </li>
                     </ul>
              </div>

              {/* bottom */}
              <div className='bottom'>
                     <div className='bot_1'>
                            <p className='bot_p1'>
                                   合计
                                   <span>
                                          ¥  {allPrice}
                                   </span>
                            </p>
                            <p className='bot_p2'>
                                   <span>已免运费</span>
                                   <span>已优惠¥200元</span>
                            </p>
                     </div>
                     <div className='bot_2'>
                            <button>立即支付</button>
                     </div>
              </div>
       </div>)
}
export default Indent